<template>
	<view class="content">
         <view class="noData" v-if="noData==true">
			 <img src="https://cdn.yueyangshuyuan.com/kong.png" />
			 <p>暂无推广</p>
		 </view>
		 <view class="listPopularize" v-if="noData==false">
			 <!-- 数据统计 -->
		 	 <view class="list" v-if="showFlag==1">
				 <view class="topList clearfix">
					 <view class="li liFirst">商品名称</view>
					 <view class="li liSec">点击数</view>
					 <view class="li liThr">下单数</view>
					 <view class="li liFor">成交数</view>
				 </view>
				 <view class="navList clearfix">
                       <view class="navLi navLiFirst">商品名称商品名称商品名称商品名称商品名称商品名称</view>
					   <view class="navLi navLiSec">0</view>
					   <view class="navLi navLiThr">0</view>
					   <view class="navLi navLiFor">0</view>
				 </view>
				 <view class="navList clearfix">
                       <view class="navLi navLiFirst">商品名称商品名称商品名称商品名称商品名称商品名称</view>
					   <view class="navLi navLiSec">1000</view>
					   <view class="navLi navLiThr">10000</view>
					   <view class="navLi navLiFor">0</view>
				 </view>
				 <view class="navList clearfix">
                       <view class="navLi navLiFirst">商品名称商品名称商品名称商品名称商品名称商品名称</view>
					   <view class="navLi navLiSec">0</view>
					   <view class="navLi navLiThr">0</view>
					   <view class="navLi navLiFor">0</view>
				 </view>
			 </view>
			 <!--订单详情 -->
             <view class="listOrder" v-if="showFlag==2">
                  <view class="orderLi">
                      <view class="liTop clearfix">
						  <span class="left">下单时间：2020-03-14 17:12</span>
						  <span class="right">已取消</span>
					  </view>
					  <view class="orderDetail ">
						  <view class="bottom clearfix">
							<view class="left">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
							<view class="right">￥<span>2300</span></view>
						  </view>
						   <p class="font">出行日期 2020年3月27日</p>
					       <p class="font">出游人数 成人*3</p>
					  </view>
					 
				  </view>
				  <view class="orderLi">
                      <view class="liTop clearfix">
						  <span class="left">下单时间：2020-03-14 17:12</span>
						  <span class="right">已取消</span>
					  </view>
					  <view class="orderDetail ">
						  <view class="bottom clearfix">
							<view class="left">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
							<view class="right">￥<span>2300</span></view>
						  </view>
						   <p class="font">出行日期 2020年3月27日</p>
					       <p class="font">出游人数 成人*3</p>
					  </view>
					 
				  </view>
				  <view class="orderLi">
                      <view class="liTop clearfix">
						  <span class="left">下单时间：2020-03-14 17:12</span>
						  <span class="right">已取消</span>
					  </view>
					  <view class="orderDetail ">
						  <view class="bottom clearfix">
							<view class="left">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
							<view class="right">￥<span>2300</span></view>
						  </view>
						   <p class="font">出行日期 2020年3月27日</p>
					       <p class="font">出游人数 成人*3</p>
					  </view>
					 
				  </view>
				  <view class="orderLi">
                      <view class="liTop clearfix">
						  <span class="left">下单时间：2020-03-14 17:12</span>
						  <span class="right">已取消</span>
					  </view>
					  <view class="orderDetail ">
						  <view class="bottom clearfix">
							<view class="left">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
							<view class="right">￥<span>2300</span></view>
						  </view>
						   <p class="font">出行日期 2020年3月27日</p>
					       <p class="font">出游人数 成人*3</p>
					  </view>
					 
				  </view>
			 </view>
			 <!-- 底部栏 -->
			 <view class="footer clearfix">
                  <view class="left"  @click="changeShowFlag(1)">
					  <img src="https://cdn.yueyangshuyuan.com/sj1.png" v-if="showFlag==1" />
					  <img src="https://cdn.yueyangshuyuan.com/sj2.png" v-if="showFlag==2" />
					  <span :class="showFlag==1?'colorSpan':''">数据统计</span>
				  </view>
				  <view class="right" @click="changeShowFlag(2)">
                       <img src="https://cdn.yueyangshuyuan.com/dd1.png" v-if="showFlag==2" />
					   <img src="https://cdn.yueyangshuyuan.com/dd2.png" v-if="showFlag==1" />
					   <span :class="showFlag==2?'colorSpan':''">订单详情</span>
				  </view>
			 </view>
			 <!-- <p class="noFont">没有更多推广了</p> -->
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showFlag:2,  //默认展示数据统计的列表 1
				noData:false,
				listCollect:[],
				pageNum:0,
				pageSize:10,
			}
		},
		onReachBottom(){
			// console.log(888888);
			this.pageNum++;
			// this.$api.collectList({
			// 	pageNum:this.pageNum,
			// 	pageSize:this.pageSize
			// }).then(json=>{
			// 		this.listCollect.push(json.list);
			// });
		},
		created() {
		   this.init();
		},
		methods:{
			init(){
                //  this.$api.collectList({
				// 	pageNum:this.pageNum,
				// 	pageSize:this.pageSize
				// }).then(json=>{
				// 		if(!json.list.length){
				// 			this.noData = true;
				// 		}else{
				// 			this.noData = false;
				// 			this.listCollect=json.list;
				// 		}
				// });
			},
			changeShowFlag(index){
               this.showFlag=index;
			}
		},
	}
</script>

<style lang="scss">
	body{
		background: #f7f7f7;
	}
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
    }
	.content {
		padding:0;
		margin:0;
		background: #f7f7f7;
		// border-top: 2upx solid #E2E6EE;
	}
	.noData {
		img {
			display: block;
			width:233upx;
		    height:220upx;	
			margin-left:259upx;
			margin-top:259upx;
		}
		p {
			font-size: 26upx;
			color: #777777;
			text-align: center;
			line-height: 48upx;
			margin-top:30upx;
		}
	}

	.noFont {
		font-size: 26upx;
		color: #777777;
		text-align: center;
		line-height: 48upx;
		margin-top:40upx;
	}
	.listPopularize {
		margin-bottom: 130upx;
       .list {
          .topList {
			  padding:25upx 20upx;
			  box-sizing: border-box;
			  .li {
				  float:left;
				  height:40upx;
				  font-size: 28upx;
                  color: #262626;
			  }
			  .liFirst {
				  width:310upx;
				  text-align: left;
			  }
			  .liSec,.liThr,.liFor {
				  width:130upx;
				  text-align: center;
			  }
		  }
		  .navList {
			  padding:35upx 20upx;
			  box-sizing: border-box;
			  background:#fff;
			  margin-bottom:25upx;
			  .navLi {
				  float: left;
				  font-size: 28upx;
				  color: #262626;
				  letter-spacing: 0;
				  line-height: 44upx;
				   text-overflow:ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp:2;
					overflow: hidden;
			  }
			  .navLiFirst {
				  width:310upx;
				  text-align: left;
			  }
			  .navLiSec,.navLiThr,.navLiFor {
				  width:130upx;
				  text-align: center;
				  line-height:90upx;
			  }
		  }
	   }
	}
	.listOrder {
          .orderLi {
			  margin:24upx 22upx 0;
			  background:#fff;
			  border-radius:5upx;
			  .liTop {
				  padding:25upx 20upx;
				  box-sizing: border-box;
				  border-bottom: 1px solid #EFF3F5;
				  .left {
					  float: left;
					  font-size: 24upx;
                      color: #777777;
				  }
				  .right {
					  font-size: 24upx;
                      color: #777777;
					  float: right;
				  }
			  }
		  }
		  .orderDetail {
               padding:25upx 20upx;
			   box-sizing: border-box;
			   .bottom {
				   margin-bottom: 25upx;
					.left {
						float: left;
						width:515upx;
						height:88upx;
						text-overflow:ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp:2;
						overflow: hidden;
						font-size: 28upx;
						color: #262626;
						line-height: 44upx;
					}
					.right {
						float: right;
						width:155upx;
						height:88upx;
						font-size: 28upx;
                        color: #E65126;
						text-align: right;
						line-height:40upx;
						span {
							font-size:36upx;
							
						}
					}
			   }
			   .font {
					font-size: 24upx;
					color: #777777;
					margin-bottom: 10upx;
			   }
		  }
		  
	}
	.footer {
		width:750upx;
		height:108upx;
		background: #FFFFFF;
        box-shadow: 0 -10upx 16upx 0 rgba(164,164,164,0.20);
		position: fixed;
		bottom:0;
		left:0;
		z-index:99;
		.left {
			float:left;
			width:374upx;
			height:100%;
			border-right:1upx solid #DDDDDD;
			position: relative;
			img {
				float: left;
				width:40upx;
				height:37upx;
				position: absolute;
				top:50%;
				left:85upx;
				margin-top:-19upx;
			}
			span {
				font-size: 32upx;
                color: #777777;
				line-height: 108upx;
				margin-left:150upx;
			}
			.colorSpan {
				color: #E25422;
			}
		}
		.right {
			float:left;
			width:375upx;
			height:100%;
			position: relative;
			img {
				float: left;
				width:39upx;
				height:43upx;
				position: absolute;
				top:50%;
				left:85upx;
				margin-top:-22upx;
			}
			span {
				font-size: 32upx;
                color: #777777;
				line-height: 108upx;
				margin-left:150upx;
			}
			.colorSpan {
				color: #E25422;
			}
		}
	}
</style>
